<template>
	<view class="content">
		<view class="header">
			<image :src="products.imgUrl"></image>
			<view class="information">
				<view class="name">
					<text>{{products.name}}</text>
				</view>
				<view class="jieshao">
					<text>{{products.content}}</text>
				</view>
				<view class="price">
					<text>￥{{lishijiage}}</text>
				</view>
			</view>
			<view class="guige">
				<button type="button">选规格</button>
			</view>
		</view>
		<view class="middle"></view>
		<view class="foot">
			<view class="title1">
				<text>
					规格:
				</text>
			</view>
			<view class="button1">
				<button :class="{active:guiGe ==='L'}" type="button" @click="doSelect('L')" >大杯</button>
				<button :class="{active:guiGe ==='M'}" type="button" @click="doSelect('M')">中杯</button>
				<button :class="{active:guiGe ==='S'}" type="button" @click="doSelect('S')">小杯</button>
			</view>
			<view class="title1">
				<text>
					温度:
				</text>
			</view>
			<view class="button1">
				<button :class="{active:temperature ==='加冰'}" type="button" @click="remarks('加冰')">加冰</button>
				<button :class="{active:temperature ==='常温'}" type="button" @click="remarks('常温')">常温</button>
			</view>
			<view class="gouwuche">
				<uni-goods-nav @buttonClick="onClick" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {onMounted,ref} from 'vue';
	import {onLoad} from '@dcloudio/uni-app'
	
	// 选择规格大小
	//临时价格
	const lishijiage =ref('')
	//初始规格
	const guiGe = ref('M')
	const doSelect = (g)=>{
		guiGe.value = g
		switch(g){
			case "L":
				lishijiage.value = Number.parseFloat(products.value.price)+5;
				break;
			case "M":
				lishijiage.value = products.value.price;
				break;
			case "S":
				lishijiage.value = Number.parseFloat(products.value.price)-5;
				break;
			default:
		}
	}
	//选择商品备注
	//初始备注
	const temperature = ref("加冰")
	const remarks = (g)=>{
		temperature.value = g
	}
	//展示商品具体信息
	const products = ref({})
	const query =(id)=>{
			uni.request({
				url: "http://wtp.qywy.cc/goods/"+id,
				success: (res) => {
					products.value = res.data
					lishijiage.value = res.data.price
					
				}
			});
			
		}
	// const query = (id)=>{
	//     fetch("http://wtp.qywy.cc/goods/"+id,{
	//         method:'get'
	//     }).then(response=>response.json()).then((data)=>{
	// 		products.value = data
	// 		lishijiage.value = data.price
			
			
	//     })
	// }
	// 获取参数
	onLoad((options)=>{
		query(options.id)
	})
	
	
	const onClick = (e)=>{
		if(e.index === 0){
			//加入购物车
			//1.获取当前用户
			const json = uni.getStorageSync("loginInfo")
			const id1 = uni.getStorageSync("id")
			console.log(id1)
			if(json){
				uni.request({
					url:"http://wtp.qywy.cc/carts",
					method:'POST',
					data:{
						goods:products.value,
						count:1,
						size:guiGe.value,
						remarks:temperature.value,
						actulPrice:lishijiage.value,
						userId:id1
					},success(res){
						uni.showToast({
							title:'添加购物车成功',
							duration:2000
						})
					}
					
				})
			}else{
				uni.showToast({
					title:'下单前，请登录',
					duration:2000
				})
			}
		}
	}
	
</script>

<style scoped>
	    .header image{
			width: 100%;
			height: 300px;
			display: flex;
		}
		.name{
			margin-top: 10px;
			margin-left: 20px;
		}
		.name text{
			font-size: 30px;
			font-weight: bold;
		}
		.jieshao{
			margin-top: 10px;
			margin-left: 20px;
		}
		.jieshao text{
			font-size: 15px;
			color: orange;
		}
		.price{
			margin-top: 30px;
			margin-left: 20px;
		}
		.price text{
			font-size: 30px;
			color: red;
		}
		.guige{
			margin-top: -40px;
			margin-left: 130px;
			padding-left: 60px;
		}
		.guige button{
			width: 150px;
			height: 40px;
			
		}
		.middle{
			margin-top: 20px;
			background-image: url('../图片/背景图片.png');
			height: 20px;
		}
		.title1{
			margin-top: 20px;
		}
		.title1 text{
			font-size: 20px;
			margin-left: 20px;
			font-weight: bold;
		}
		.button1{
			display: flex;
			flex-direction: row;
			margin-top: 20px;
		}
		.button1 button{
			width: 100px;
			height: 40px;
		}
		.gouwuche{
			margin-top: 30px;
		}
		.active{
			background-color: orange;
		}
		
</style>
